<template>
	<div>
		<section style="height: 2.1rem;"></section>
		<mu-button small  @click="rightPopup=!rightPopup" style="float:right;width: 100%;" >
				筛选
			</mu-button>
							<section style="height: 2rem;"></section>
		
		<mu-flex>
			<mu-slide-top-transition>
				<section v-show="rightPopup" style="background-color: white;width: 100%;display: flex;flex-direction: column;">
<!-- 					<mu-row gutter>	
						<mu-col  width="40" >
							<mu-select label="选择账户" filterable v-model="orderBillNo">
								<mu-option v-for="item in orderList" :key="item.BillNo" :label="item.CustomName" :value="item.BillNo"></mu-option>
							</mu-select>
						</mu-col>
					</mu-row> -->
					<mu-row gutter>	
						<mu-col  width="40" >
							 <mu-date-input v-model="startTime" label="开始时间" ></mu-date-input>
						</mu-col>
					</mu-row>
					<mu-row gutter>	
						<mu-col  width="40" >
							<mu-date-input v-model="endTime" label="结束时间"></mu-date-input>
						</mu-col>
					</mu-row>
				</mu-row>			
					<section style="height: 0.1rem;"></section>
					<mu-button  @click="close('right')"> 确定</mu-button>
				</section>	  
		    </mu-slide-top-transition>
		</mu-flex>
		
		
		<div v-show="showList">
			
			<div style="padding:0.4rem 0.6rem;"  v-for = "item in list" >
				<section style="width: 100%;display: flex;flex-direction: column;background-color: white;">
					<section style="justify-content: left;align-items: center;display: flex;flex-direction: row;height: 2.8rem;padding: 0 0.5rem;">
						<span style="flex: 7;text-align: left;font-size: 1.1rem;">产品编号：{{item.ItemNumber}}</span>
					</section>
					<section style="display: flex;flex-direction: column;justify-content: center;justify-content: left;padding: 0 0.5rem;">
						<span  class="card-item-child">产品名称：{{item.ItemName}}</span>
						<span class="card-item-child">已发量：{{item.QtySut}}</span>
						<span class="card-item-child">车辆数：{{item.SumCount}}</span>
						
					</section>
					<mu-divider></mu-divider>
				</section>
				</div>
			
			
			
<!-- 			<qty-sum-item v-for = "item in list"
				:key = "item.ItemID"
				:ID = "item.ItemID"
				:ItemNumber = "item.ItemNumber"  
				:ItemName = "item.ItemName"
				:QtySut = "item.QtySut"
				:SumCount = "item.SumCount"/> -->
				
				
			
  			</div>
     	<div v-show="!showList">
			<mu-circular-progress :size="24" color="blue500"/>
		</div>
		<div style="width: 100%;height: 8rem;"></div>
		
	</div>
</template>

<script>
	
	export default {
  data () {
    return {
      bottomPopup: false,
      topPopup: false,
      leftPopup: false,
      rightPopup: false,
      startTime:'',
	  endTime:'',
	  noFull:false,
	  refreshing: false,
      trigger: null,
	  num: 19,

	  list:[],

	  orderBillNo:'',
	  dialogOrder: false,
	  orderList:[],
	  orderId:null,//选择的订单Id
	  showList:false,
    }
  },
  mounted () {
    
     this.trigger = this.$el
     this.getQtySumByItem()
     
  },
  methods: {
  	
clearStartTime(){
  		this.startTime=''
  	},
  	clearEndTime(){
  		this.endTime=''
  	},
  	getQtySumByItem(){//获得按物料的数量汇总列表
  		let that = this
  		that.axios.post(that.global.homeSrc+'/hongchang/getQtySumByItem',{
  			'factoryId':localStorage.factoryId,
  			'uid':localStorage.uid, 	
  			'startTime':this.startTime,
  			'endTime':this.endTime,
  		}).then(function(response){
  			console.info(response.data.data)
  			that.showList=true
  			that.list = response.data.data.list
  		}).catch(function(error){
  			
  		})
  	},
  	
    open (position) {
      this[position + 'Popup'] = true
    },
    close (position) {
      this.getQtySumByItem()
      this[position + 'Popup'] = false
    }

  },
  watch: {
    topPopup (val) {
      if (val) {
        setTimeout(() => {
          this.topPopup = false
        }, 2000)
      }
    }
  }
}
</script>

<style>
		.card-item-child{
		text-align: left;
		font-size: 0.9rem;
		height: 1.6rem;
		color: #939393;
	}
	.demo-popup-right {
/*  display: flex;*/
  width: 75%;
  height: 75%;
  max-width: 25rem;
  padding: 24px;
}


.left-Grant{
		flex-wrap: nowrap
	}
	.right-mu-input{
		
		margin-top: 0.6rem;
	}
	.input-add{
		width: 100%;
		display: flex;
		justify-content: left;
		align-items: center;
		height: 2.8rem;
		flex-direction: row;
	}
	.title{
		border-bottom: 1px solid #e5e5e5;
		width: 100%;
		display: flex;
		justify-content: left;
		align-items: center;
		height: 2.8rem;
	}
	
	.choiceBtn{
		position: absolute;
		bottom: 1rem;
		right: 1rem;
		width: 4.6rem;
		background-color: #0090FF;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 1.6rem;
		color: white;
		font-size: 0.7rem;
		border-radius: 3px;
	}
	.choice-list{
		width: 100%;
		height: 100%;
		margin-top: 0.6rem;
	}
	.choice-sec{
		display: flex;
		flex-direction: column;
		height: 100%;
		justify-content: left;
		width: 100%;
		border: 1px solid #e5e5e5;
		border-radius: 4px;
		margin-top: 0.6rem;
	}
	.show-sec{
		display: flex;
		flex-direction: column;
		justify-content: left;
		width: 100%;
		border: 1px solid #e5e5e5;
		border-radius: 4px;
		margin-top: 0.6rem;
	}
	.show-sec span{
		text-align:left;
		height:2rem;
		text-indent: 0.6rem;
		line-height: 2rem;
	}
	.choice-bg{
		background: #e5e5e5;
	}
	.choice-sec span{
		text-align: left;
		font-size: 0.8rem;
		text-indent: 0.6rem;
		height:2rem;
		line-height: 2rem;
	}
	.show-list{
		display: flex;
		flex-direction: column;
		height: 100%;
		justify-content: left;
		width: 100%;
		/*border: 1px solid #e5e5e5;*/
		margin-top: 1.6rem;
	}
	.show-list span{
		text-align: left;
		font-size: 0.8rem;
		text-indent: 1rem;
		height:2rem;
		line-height: 2rem;
	}
	.show-sec-input{
		height: 2rem;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center; 
		margin-bottom: 0.6rem;
		padding-right: 0.6rem;
	}
	.height-show{
		height: 2rem;
		line-height: 2rem;
	}
	.mu-text-field{
		font-size: 0.8rem!important;
	}
	.table-title{
		color: rgb(0, 144, 255);
		font-size: 0.9rem;
	}
	.table-title,.table-tr{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		height: 2.4rem;
		border-bottom: 1px solid rgba(234,234,234,.8);
		
	}
	.table-tr{
		font-size: 0.8rem;
	}
	.choice-table-tr{
		background-color: rgba(234,234,234,.5);
	}
	.table-title span:nth-child(1),.table-tr span:nth-child(1){
		flex: 1.5;
	}
	.table-title span:nth-child(2),.table-tr span:nth-child(2){
		flex: 1;
	}
	.table-title span:nth-child(3),.table-tr span:nth-child(3){
		flex: 1;
	}


</style>